{include file='fcworker/fc_head'}
{include file='fcworker/fc_beilaisearch'}
<style type="text/css">
    .td-img{
        width: 25px;
        height: 25px;
        border-radius: 25px;
    }
    .ac-notice{
        width: 92%;
        margin: 8px auto;
        padding: 8px;
        line-height: 20px;
        text-align: center;
        display: block;
        font-size: 13px;
        box-shadow: 0 0  5px 5px rgba(0, 0, 0, 0.06);
        border-radius: 8px;
    }
    .picker-form{
        display: inline;
        width: 50%;
    }
    .setTitle{
        position: fixed;
        left: 0.2rem;
        top: 0;
        z-index: 2;
        overflow: hidden;
        line-height: 1.37rem;
        height: 1.37rem;
        background-size: 100% 1.37rem;
    }
    .h167{
        height: 1.67rem;
    }
    .new_tr{
        height: 0.8rem !important;
        line-height: 0.8rem !important;
    }
    .tabTit{
        font-size: .28rem;
        line-height: .68rem;
        color: #000000;
        position: relative;
        text-indent: .32rem;
    }
    .fixed_t_w{
        /*position: fixed;*/
        top: 4rem;
        width: 100%;
        bottom: 0;
        overflow-y: scroll;
        max-height: calc(100vh - 2rem);
    }
    .fixed_t_w18{
        top: 1.8rem;
    }
    .fixed_t_w th{
        position: sticky;
        top:0;
    }

    .container{
        padding-top: .15rem;
    }
    .label {
        display: inline;
        padding: 0.2em 0.6em 0.3em;
        font-size: 85%;
        font-weight: 700;
        line-height: 1;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 0.25em;
    }
    .label-danger {
        background-color: #d9534f;
    }
    .label-success {
        background-color: #5cb85c;
    }
    .label-warning {
        background-color: #f0ad4e;
    }
</style>

<div id="mescroll" class="mescroll">
    <div id="app">
        {if $sj_list}
        <div class="container" style="width: 100%;margin-top: 1.1rem;">
            <div class="tabTit" > 当前选择商家：
                <select name="sjid" id="sjid"  onchange="changeSjItem(this.options[this.options.selectedIndex].value)">
                    {loop $sj_list $key $item}
                    <option {if $item['sjid']==$sjid}selected{/if} value="{$item['sjid']}">{php echo mb_substr($item['name'],0,8);}</option>
                    {/loop}
                </select>
            </div>
        </div>
        {/if}
        <div class="container" style="width: 100%;margin-top:{if $sj_list} .1rem{else}1.1rem{/if}">
            <div class="tabTit" > 当前选择课程：
                <select name="p_id" id="select_p_id"  onchange="changeItem(this.options[this.options.selectedIndex].value)">
                    {loop $type_arr $key $item}
                    <option {if $item['c_id']==$p_id}selected{/if} value="{$item['c_id']}">{php echo mb_substr($item['title'],0,8);}-({$item['total']})</option>
                    {/loop}
                </select>
            </div>
        </div>


        <div class="activeBox" >
            <div class="activeInfor activeTab fixed_t_w " style="{if $sj_list}top: 2.9rem{else}top: 2rem{/if}">

                <table cellpadding="0" cellspacing="0" width="100%" id="list">
                    <tr style="height: 40px;">
                        <th style="width:.7rem;">序号</th>
                        <th style="width:.7rem;">头像</th>
                        <th style="width:1.7rem;">用户信息</th>
                        <th style="width:1.2rem;">课程</th>
                        <th style="width:1.2rem;">状态</th>
                        <th style="width:1.4rem;">核销时间</th>


                    </tr>
                    {loop $sj_courses_list $key $item}
                    <tr class="new_tr" {if $baseinfo['system']['softstyle']==109}onclick="openAlert(this)" {/if} data-id="{$item['id']}" data-shangjiaid="{$item['shangjiaid']}" data-uid="{$item['uid']}">
                        <td>{php echo $key+1;}</td>
                        <td><img src="{$item['avatar']}" class="td-img"></td>
                        <td>{$item['username']}<br>{$item['mobile']}</td>
                        <td>{$item['name']}</td>
                        {if $item['status']==1}
                        <td ><span class="label label-success">已核销</span><br>{$item['verify_name']}</td>
                        {else}
                        <td onclick="verifyItem({$item['id']},`{$item['address']}`)"><span class="label label-danger" >未核销</span></td>
                        {/if}
                        <td>{if $item['status']==1}{$item['updated_at']}{/if}</td>
                    </tr>
                    {/loop}
                </table>
                <div style="height: 60px;width: 100%">
                    {if $hasNext}
                    <p style="text-align: center;font-size: 12px;color: gray;" class="tips_p">加载更多..</p>
                    {/if}
                </div>
            </div>
        </div>
        <a href="/{php echo createMobileUrl('x_index',array('themeid'=>$themeid));}" class="homeTag"><img src="{$_G['URL']['FCWORK_CSS']}images/homeBtn.png"></a>
        <input type="hidden" name="page" id="page" value="{$page}">
        <input type="hidden" name="p_id" id="p_id" value="{$p_id}">
        <input type="hidden" name="hasNext" id="hasNext" value="{$hasNext}">
    </div>
</div>

<style>
    .bg-screen{
        position: fixed;top:0;left:0;width: 100%;height: 100%;background-color: rgba(0,0,0,.6);display: flex;justify-content: center;align-items: center;z-index: 201;
    }
    .bg_item{
        display: flex;flex-direction: row;justify-content: space-around;
    }
    .bg_item_sel{
        width: 45%;
    }
</style>
<div class="bg-screen" style="display: none;">
    <input type="hidden" id="course_id" name="course_id" value=""/>
    <input type="hidden" id="uid" name="uid" value=""/>
    <input type="hidden" name="themeid" value="{$themeid}"/>

    <div class="box" style="width: 80%;background-color: #fff;min-height: 300px;display: flex;flex-direction: column;">
        <div style="display: flex;flex-direction: row;justify-content: space-between;height: 6vh;line-height: 6vh;padding: 0 2vw;background: #1E9FFF;">
            <span>修改课程</span>
            <div onclick="closeAlert()">关闭</div>
        </div>
        <div class="bg_item" style="margin-top: 10vh">
            <div>商家</div>
            <select class="bg_item_sel" name="shangjia" id="shangjia" onchange="changeSj();">
                {loop $sj_list $row}
                <option value="{$row['sjid']}" >{$row['name']}</option>
                {/loop}
            </select>
        </div>
        <div class="bg_item" style="margin-top: 5vh">
            <div>课程</div>
            <select class="bg_item_sel" name="course" id="course" onchange="changeKc();">
                <option value="" >请选择课程</option>
            </select>
        </div>
        <div class="bg_item" style="margin-top: 5vh">
            <div>地址</div>
            <select class="bg_item_sel" name="adress" id="adress">
                <option value="" >请选择地址</option>
            </select>
        </div>
        <div style="margin-top: 4vh;display: flex;justify-content: center;">
            <button type="button" onclick="subEditInfo()" style="padding: 2px 4px;">保存修改</button>
        </div>
    </div>
</div>
<script type="text/javascript">
    const mescroll = new MeScroll("mescroll", {
        down: {
            auto: false,
            callback: () => {
                mescroll.endSuccess();
                setTimeout(() => {
                    window.location.reload();
                },500)
            }
        },
        up: {
            use: false
        }
    })
    document.querySelector(".fixed_t_w").addEventListener('touchmove',function(e){
        e.stopPropagation()
    })

    var loadingState= false;
    var hasNext = 1;
    var canVerify = true;
    $(".fixed_t_w").scroll(function(){
        hasNext = $("#hasNext").val();
        var height = $(".fixed_t_w").height();

        var scrollSpace = $(".fixed_t_w").scrollTop();

        if (scrollSpace > $(".fixed_t_w table").height() - height){
            if (!loadingState && hasNext==1){
                var page = $("#page").val();
                var p_id = $("#p_id").val();
                var searchtxt = $("#searchtxt").val();
                var next_page = +page+1;
                loadingState = true;
                $("#page").val(next_page);
                layer.msg('加载中', {
                    icon: 16
                    ,shade: 0.01
                });
                var postUrl="/{php echo createMobileUrl('X_beilai',array('themeid'=>$themeid));}";
                $.ajax({
                    url:postUrl,
                    dataType:'json',
                    method:'post',
                    data: {page:next_page,p_id:p_id,searchtxt:searchtxt},
                    success:function (e) {
                        let data = e.data;
                        let error = e.error;
                        let msg = e.msg;
                        if (error!=0){
                            layer.msg(msg);
                        }else{
                            if (data.list){
                                $("#list").append(data.list);
                            }
                            layer.closeAll();
                        }
                        loadingState = false;
                        if (data.hasNext){
                            hasNext = 1;
                        }else{
                            hasNext = 0;
                            $(".tips_p").html('暂无更多数据！');
                        }
                        $("#hasNext").val(hasNext);
                    },
                    fail:function (err) {
                        console.log(err)
                    }
                });
            }
        }
    });

    //切换商家
    let sjc = [];
    function changeSj() {
        sjc = [];
        $('#course').val('');
        $('#course').html(`<option value="" >请选择课程</option>`)
        $('#adress').val('')
        $('#adress').html(`<option value="" >请选择地址</option>`)
        var nSel = document.getElementById("shangjia");
        var index = nSel.selectedIndex; // 选中索引
        var shangjiaid= nSel.options[index].value;
        let id = $("#course_id").val();
        let uid = $("#uid").val();
        let postUrl = "/{php echo createMobileUrl('X_editCourse',array('themeid'=>$themeid));}";
        $.ajax({
            url:postUrl,
            dataType:'json',
            method:'post',
            data:{shangjia_id:shangjiaid,course_id:id,uid:uid},
            success:function (e) {
                let status = e.error;
                if (status==1){
                    layer.msg(e.msg);
                    return
                }
                sjc = e.data;
                const str = sjc.map(item => {
                    return `<option value="${item.id}" >${item.name}</option>`
                }).join('');
                $('#course').append(str)
            },
            fail:function (err) {
                console.log(err)
            }
        })
    }
    function changeKc() {
        $('#adress').val('')
        $('#adress').html(`<option value="" >请选择地址</option>`)
        var nSel = document.getElementById("course");
        var index = nSel.selectedIndex; // 选中索引
        var course= nSel.options[index].value;
        if(sjc.length > 0) {
            const str = sjc.filter(item => item.id == course)[0].address.map(citem => `<option value="${citem}" >${citem}</option>`).join('')
            $('#adress').append(str)
        }
    }
    
    
    function subEditInfo() {
        let shangjiaid = $("#shangjia").val();
        let course_id = $("#course_id").val();
        let uid = $("#uid").val();
        let course = $("#course").val();
        let adress = $("#adress").val();
        let postUrl = "/{php echo createMobileUrl('X_sureEditCourse',array('themeid'=>$themeid));}";
        $.ajax({
            url:postUrl,
            dataType:'json',
            method:'post',
            data:{shangjia:shangjiaid,course_id:course_id,uid:uid,course:course,adress:adress},
            success:function (e) {
                let status = e.error;
                if (status==1){
                    layer.msg(e.msg);
                    return
                }
                layer.msg(e.msg);
                window.location.reload();
            },
            fail:function (err) {
                console.log(err)
            }
        })
    }

    <!--    弹出表单-->
    function closeAlert() {
        $(".bg-screen").hide();
    }
    function openAlert(e) {
        let id = e.dataset.id;
        let shangjiaid = e.dataset.shangjiaid;
        let uid = e.dataset.uid;
        $("#course_id").val(id);
        $("#uid").val(uid);
        $(".bg-screen").show();
    }


    function changeSjItem(e) {
        let jump_url = "/{php echo createMobileUrl('X_beilai',array('themeid'=>$themeid));}"+"&sjid="+e;
        window.location.href = jump_url;
    }
    function changeItem(e) {
        {if $sj_list}
        let sjid = $("#sjid").val();
        {else}
        let sjid = 0;
        {/if}
        let jump_url = "";
        if (sjid>0){
            jump_url = "/{php echo createMobileUrl('X_beilai',array('themeid'=>$themeid));}"+"&sjid="+sjid+"&p_id="+e;
        }else{
            jump_url = "/{php echo createMobileUrl('X_beilai',array('themeid'=>$themeid));}"+"&p_id="+e;
        }

        window.location.href = jump_url;
    }
    function search_beilai() {
        let searchtxt = $("#searchtxt").val();
        let p_id = $("#select_p_id").find("option:selected").val();
        var postUrl="/{php echo createMobileUrl('X_beilai',array('themeid'=>$themeid,'page'=>1));}";
        postUrl = postUrl+"&p_id="+p_id+'&searchtxt='+searchtxt
        window.location.href = postUrl;
    }
    function verifyItem(flag_id,address) {
            if (canVerify){
                canVerify = false;
                let tmp_msg = '上课地址：'+address+'<br/>';
                layer.msg(tmp_msg+'确认进行该课程的核销吗？',{
                    time:0,
                    btn:['确认','取消'],
                    yes:function (index) {
                        if ( flag_id ){
                            var postUrl="/{php echo createMobileUrl('X_beilaiVerify',array('themeid'=>$themeid));}";
                            $.ajax({
                                url:postUrl,
                                dataType:'json',
                                method:'post',
                                data: {id:flag_id},
                                success:function (e) {
                                    let data = e.data;
                                    let error = e.error;
                                    let msg = e.msg;
                                    if (error){
                                        layer.msg(msg);
                                    }else{
                                        layer.msg(msg);
                                        location.reload();
                                    }
                                },
                                fail:function (err) {
                                    alert(err);
                                }
                            });
                        }else{
                            layer.msg('发生了意外')
                        }
                        canVerify = true;
                        layer.close(index);
                    },
                    btn2:function (index) {
                        canVerify = true;
                        layer.close(index);
                    }
                });
            }
    }



</script>